<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>商品详情</title>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
	<link rel="stylesheet" type="text/css" th:href="@{/style/common.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/style/details.css}"/>
	<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
</head>
<body>
	<div class="product-img">
		<img class="product-pic" th:src="@{${goods.image}}"/>
		<a href="javascript: history.back(-1);" class="back">
			<img src="http://owtl83r0c.bkt.clouddn.com/back.png" />
		</a>
	</div>
	<p class="product-name" th:text="${goods.name}"></p>
	<div class="product-other-info">
		<div>
			<sapn class="original-desc">原价</sapn>
			<span class="original-price" th:text="${goods.price}"></span>


			<span class="coupon-after" th:unless="${#strings.equals(goods.price, goods.priceDiscount)}">券后价</span>
			<span class="coupon-after-price" th:unless="${#strings.equals(goods.price, goods.priceDiscount)}" th:text="${'￥' + goods.priceDiscount}"></span>

			<span class="coupon-after" th:if="${#strings.equals(goods.price, goods.priceDiscount)}">优惠</span>
			<span class="coupon-after-price" th:if="${#strings.equals(goods.price, goods.priceDiscount)}" th:text="${goods.discountDetail}"></span>

			<span class="coupon-info-wrapper" th:unless="${#strings.equals(goods.price, goods.priceDiscount)}">
				<b>券</b>
				<span class="coupon-price" th:text="${'￥' + goods.discount} + '.0'"></span>
			</span>
		</div>
		<span class="alreadyBuy" th:text="${goods.alreadyBuy + '人已买'}"></span>
	</div>
	<input type="hidden" id="couponCode" th:value="${goods.mainKey}" />
	<p class="tips">数量有<b>限</b>，<b>抢</b>完即止</p>

	<div class="coupon-info" th:if="${#strings.startsWith(goods.mainKey,'￥')}">
		<span id="coupon">
			【淘口令购买】&nbsp;长按框内&nbsp;>&nbsp;全选&nbsp;>&nbsp;复制，打开[手机淘宝]即可 <b th:text="${goods.mainKey}"></b>也可以点击下方按钮一键复制
		</span>
	</div>

	<div class="coupon-info" th:unless="${#strings.startsWith(goods.mainKey,'￥')}">
		<span>点击下面<b>淘宝打开领取</b>按钮,长按链接,<b>选择复制</b>,点击<b>打开</b>,选择<b>淘宝</b></span>
	</div>

	<div class="receive-button-wrapper" th:if="${#strings.startsWith(goods.mainKey,'￥')}">
		<button id="receive-button">一键复制淘口令</button>
	</div>

	<div class="receive-button-wrapper" th:unless="${#strings.startsWith(goods.mainKey,'￥')}">
		<a id="receive-link" th:data="${goods.link}" href="javascript:void(0)">浏览器打开领取</a>
	</div>

	<div id="tip-mask">
		<div class="tip-wrapper">
			<img class="tip-arrow" src="http://owtl83r0c.bkt.clouddn.com/tipArrow2.jpg" width="50"/>
			<span class="tip-info">请点击右上角，选中 <b></b>打开，点击领取，就可以到淘宝下单啦！</span>
			<img id="tip-img"/>
		</div>
	</div>

	<span id="success-info">
		<span>复制成功</span>
		<span>请打开淘宝购买</span>
	</span>
	<script>
        function isWeiXin() {
            var ua = window.navigator.userAgent.toLowerCase()
            if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                return true
            } else {
                return false
            }
        }

        function isAndroid () {
            var u = navigator.userAgent
        	var flag = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
			return flag
		}
		
		function isIOS () {
            var u = navigator.userAgent
            var flag = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
			return flag
        }

        if (isIOS()) {
            $('#tip-mask .tip-info b').html('Safari')
            $('#tip-img').attr('src', 'http://owtl83r0c.bkt.clouddn.com/ios.png')
        }

        if (isAndroid()) {
            $('#tip-mask .tip-info b').html('浏览器')
            $('#tip-img').attr('src', 'http://owtl83r0c.bkt.clouddn.com/android.png')
		}

        $('#receive-link').on('click', function (e) {
            e.preventDefault()
			e.stopPropagation()
            var href = $(this).attr('data')
            if (isWeiXin()) {
                $('#tip-mask').css('display', 'block')
			} else {
                window.location.href = href
			}
        })

		$('#tip-mask').on('click', function (e) {
			if (e.target.id === 'tip-mask') {
			    $(this).css('display', 'none')
			}
        })


		$('#receive-button').attr('data-clipboard-text', $('#couponCode').val())
		var button = document.getElementById('receive-button')
        var clipboard = new Clipboard('#receive-button')
        clipboard.on('success', function(e) {
            button.style.backgroundColor = '#02AE69'
            button.textContent = '领券成功,打开淘宝即可'
			$('#success-info').css('display', 'flex')
			setTimeout(function () {
                $('#success-info').css('display', 'none')
            }, 2000)
        })
		clipboard.on('error', function (e) {
            button.style.backgroundColor = '#DD514C'
            button.textContent = '领券失败,请手动复制'
        })

	</script>
</body>
</html>